<template>
    <div class="huxiang">    
        <mt-header fixed class="yan" title="户型详情">
            <img @click="tiao" class="zuo_jian" src="../aimg/zuo.png" alt="" slot="left">
            <img class="zhuanfa" src="../aimg/zhuangfa.png" alt="" slot="right">
        </mt-header>     
        <div class="tu" style="height:200px">       
            <mt-swipe :auto="false" :continuous="false" 
            :show-indicators="true" >        
                <mt-swipe-item>
                    <img :src="require(`../../public/img/huxin/${this.list[this.eid-1].other1}`)" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="require(`../../public/img/huxin/${this.list[this.eid-1].other2}`)" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="require(`../../public/img/huxin/${this.list[this.eid-1].ald}`)" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="require(`../../public/img/huxin/${this.list[this.eid-1].other3}`)" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="require(`../../public/img/huxin/${this.list[this.eid-1].other4}`)" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div><br><br>
        <div class="name_zong">
            <span class="name">{{list[this.eid-1].orientation}}</span><br><br>
            <span class="huxing_mian">{{list[this.eid-1].area}}</span>
            <span class="huxing">{{list[this.eid-1].house}}</span>
            <div class="score_zong">
                <span class="score">{{list[this.eid-1].price}}</span>
                <span  class="yue">元/月起</span>
            </div>
        </div><br><br>
        <div class="ditu_tubiao">
            <img class="tubian_di" src="../aimg/tubiao.png" alt="">
            <div>
                <span class="addres_di">{{list[this.eid-1].addres}}</span>
            </div>
        </div>
        <div class="button_fu">
            <div class="button_zi">
                <a @click="goto(xid)" href="#">查看门店</a>            
            </div>
        </div><br><br>
        <div class="liangdian_zong">
            <span class="liangdian">户型亮点</span><br><br><br>
            <span v-if="kai" class="liangdian_jieshao">
                {{details}}
                <a v-show="watchstate" class="jieshao" href="#" @click="load1">查看更多</a>
                <a v-show="!watchstate" class="jieshao" href="#" @click="load2">收起</a>
            </span>
            <!-- <span v-else class="liangdian_jieshao">
                {{list[0].lights}}
                <a class="jieshao" href="#" @click="load2">收起</a>
            </span> -->
        </div><br><br>
        <div class="pei">
            <span class="peizhi">配套设施</span>
            <span class="shu">更多<img class="you" src="../aimg/you.png" alt=""></span><br><br><br>
            <div class="shezhi">
                <div class="juli">
                    <img class="tubiao" src="../aimg/ditie.png" alt=""><br><br>
                    <p class="zi1">地铁</p>
                </div>
                <div class="juli">
                    <img class="tubiao_li" src="../aimg/bianli.png" alt=""><br><br>
                    <p class="zi2">便利店</p>
                </div>
                <div class="juli">
                    <img class="tubiao_xi" src="../aimg/xiyi.png" alt=""><br><br>
                    <p class="zi3">洗衣服务</p>
                </div>
                <div class="juli">
                    <img class="tubiao_ting" src="../aimg/tingche.png" alt=""><br><br>
                    <p class="zi4">停车场</p>
                </div>
                <div class="juli">
                    <img class="tubiao1" src="../aimg/yumaoqiu.png" alt=""><br><br>
                    <p class="zi5">羽毛球场</p>
                </div>
            </div>
        </div><br><br>
        <div class="pei_zufang">
            <span class="peizhi">租房需知</span><br><br>
            <div class="zujing">
                <span class="biaozun">收费标准</span>
                <span class="feixiang">租金不包含其他费项</span>
            </div>
        </div><br><br>
        <div class="wei_zong">
            <div class="shou">
                <img class="tubiao_shou" src="../aimg/shou.png" alt="">
                <p class="zi_shou">收藏</p>
            </div>
            <div class="wei">
                <img class="tubiao2" src="../aimg/dianhua.png" alt="">
                <p class="zi6">电话咨询</p>
            </div>
            <div class="yuyue">
                在线预约
            </div>
        </div><br><br><br>  
    </div>
</template>
<script>
    export default{
        // props:["eid"],
        data(){
            return{
                list:"",
                kai:true,
                details:'',
                watchstate:true,
                eid:"",
                xid:""
            }
        },
        methods:{
            tiao(){
                this.$router.push('/huxing')
            },
            //路由跳转
            zhi(){
                this.xid=this.list[this.eid-1].xid;
                console.log(this.xid)
            },
            goto(kid){
                this.$router.push(`/xiangqing/${kid}`)
            },
            loaddetails(){
                this.details=(this.list[this.eid-1].lights).slice(0,84)+'...'
            },
            load1(){
                // this.kai=false;
                this.details=this.list[this.eid-1].lights;
                this.watchstate=false
            },
            load2(){
                this.watchstate=true
                this.details=(this.list[this.eid-1].lights).slice(0,84)+'...'
            },
            loadPage(){
                this.axios.get("/house_structure/v1/search",{
                }).then(res=>{
                    // console.log(res.data);
                    this.list=res.data;                
                    this.eid=this.$route.params.eid;
                    this.loaddetails();
                    console.log(this.list[this.eid-1].other1)
                    console.log(this.list[this.eid-1].xid)
                    this.zhi();
                })
            }
        },
        mounted(){
            this.loadPage();
        }
    }
</script>
<style scoped>
*{margin: 0;padding: 0;}
.yan{
    background-color: white;
    color: black;
    font-size: 16px;
}
.zuo_jian{
    width: 25px;height: 25px;
}
.zhuanfa{
    width: 30px;height: 25px;
}
.tu{
    width: 100%;
}
.tu img{
    width: 93%;
    height: 200px;
    margin-left: 11px;
}
.name_zong{
    margin-left: 15px;
}
.name{
    font-weight: 900;
    font-size: 18px;
}
.huxing_mian{
    font-size: 12px;
}
.huxing{
    font-size: 12px;
    margin-left: 23px;
}
.score_zong{
    float: right;
    margin-top: -5px;
    margin-right: 15px;
}
.score{
    color: coral;
    font-size: 18px;
}
.yue{
    font-size: 12px;
    display: inline-block;
}
.ditu_tubiao{
    display: flex;
}
.tubian_di{
    margin-left: 7px;
}
.addres_di{
    font-size: 13px;
    margin-top: 4px;
    display: inline-block;
    font-weight: 600;
}
.button_fu{
    position: relative;
}
.button_zi{
    position: absolute;
    left: 73%;
    top: -24px;
    width: 99px;height: 35px;
    background-color: coral;
    /* border-radius: 20px; */
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.button_zi>a{
    color: white;
    display: inline-block;
    margin-left: 18px;
    line-height: 37px;
    font-size: 15px;
}
.liangdian_zong{
    margin-left: 21px;
    margin-right: 15px;
}
.liangdian{
    font-weight: 900;
    font-size: 18px;
    /* margin-left: 15px; */
}
.liangdian_jieshao{
    /* margin-left: 10px; */
    font-size: 15px;
}
.jieshao{
    color: coral;
}
.pei{
    margin-left: 19px;
}
.pei_zufang{
    margin-left: 19px;
    /* padding-bottom: 12px; */
}
.peizhi{
    font-size: 18px;
    font-weight: 900;
}
.shu{
    float: right;
    font-size: 12px;
    color: darkgray;
    margin-top: 6px;
}
.you{
    width: 20px;height: 20px;
    margin-right: 12px;
    margin-top: -6px;
}
.shezhi{
    display: flex;
    justify-content: space-between;

}
.tubiao{
    width: 45px;height: 40px;
}
.tubiao_li{
    margin-left: -12px;
    width: 45px;height: 40px;
}
.tubiao_xi{
    margin-left: -16px;
    width: 45px;height: 40px;
}
.tubiao_ting{
    margin-left: -26px;
    width: 45px;height: 40px;
}
.tubiao1{
    width: 50px;height: 40px;
    margin-left: -39px;
}
.zi1{
    font-size: 13px;
    margin-left: 7px;
}
.zi2{
    font-size: 13px;
    margin-left: -11px;
}
.zi3{
    font-size: 13px;
    margin-left: -20px;
}
.zi4{
    font-size: 13px;
    margin-left: -25px;
}
.zi5{
    font-size: 13px;
    margin-left: -45px;
}

.biaozun{
    font-size: 13px;
}
.feixiang{
    font-size: 13px;
    float: right;
    margin-right: 3%;
}
.huxiang{
    position: relative;
}
.wei_zong{
    width: 100%;
    height: 57px;
    background-color: #fffcfc;
    display: flex;
    position: fixed;
    bottom: 0px;
}
.wei{
    margin-left: 18px;
}
.tubiao2{
    margin-left: 5px;
}
.tubiao_shou{
    margin-left: 15px;
    margin-top: 2px;
}
.zi_shou{
    font-size: 12px;
    margin-left: 18px;
    color: rgb(133, 133, 133);

}
.zi6{
    font-size: 12px;
    color: rgb(133, 133, 133);
}
.yuyue{
    width: 228px;
    height: 41px;
    margin-left: 17px;
    margin-top: 5px;
    background-color: rgb(252, 114, 64);
    line-height: 38px;
    font-size: 12px;
    color: white;
    text-align: center;
    border-radius: 5px;

}
</style>